<template>
	<view class="container" style="padding: 80upx 20upx;">
		<view class="tui-header">
			<image style="width: 80rpx; height: 80rpx;" src="../../static/icon/app/120x120.png"></image>
			<tui-icon v-if="!canIUseGetUserProfile" name="shut" :size="26" @click="back"></tui-icon>
		</view>
		<view class="tui-page-title">第五玩伴 - 登录</view>
		<view class="tui-form">
			<view class="tui-view-input">
				<tui-list-cell :hover="false" :lineLeft="false" backgroundColor="transparent">
					<view class="tui-cell-input">
						<tui-icon name="mobile" color="#6d7a87" :size="20"></tui-icon>
						<input :adjust-position="false" :value="mobile" placeholder="请输入手机号"
							placeholder-class="tui-phcolor" type="number" maxlength="11" @input="inputMobile" />
						<view class="tui-icon-close" v-show="mobile" @tap="clearInput(1)">
							<tui-icon name="close-fill" :size="16" color="#bfbfbf"></tui-icon>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false" backgroundColor="transparent">
					<view class="tui-cell-input">
						<tui-icon name="pwd" color="#6d7a87" :size="20"></tui-icon>
						<input :adjust-position="false" :value="password" placeholder="请输入密码" :password="true"
							placeholder-class="tui-phcolor" type="text" maxlength="36" @input="inputPwd" />
						<view class="tui-icon-close" v-show="password" @tap="clearInput(2)">
							<tui-icon name="close-fill" :size="16" color="#bfbfbf"></tui-icon>
						</view>
					</view>
				</tui-list-cell>
			</view>
			<view class="tui-cell-text">
				<view class="tui-color-primary" hover-class="tui-opcity" :hover-stay-time="150"
					@click="resetPassword()">忘记密码？</view>
				<view hover-class="tui-opcity" :hover-stay-time="150">
					没有账号？
					<text class="tui-color-primary" @click="register()">注册</text>
				</view>
			</view>
			<view class="tui-btn-box">
				<tui-button :disabledGray="true" :disabled="disabled" :shadow="true" shape="circle" @click="login()">登录
				</tui-button>
			</view>
		</view>
		<view class="l-body-fixed" v-if="canIUseGetUserProfile">
			<view style="width: 100%; display: flex; align-items: center; justify-content: center; ">

				<view @click="getUserProfile" style="align-items: center;display:flex;">
					<image src="/static/icon/ui/user/wechat.png"
						style="width: 80rpx; height: 60rpx; align-items: center; padding-right: 20rpx;"></image>
					微信登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			disabled: function() {
				let bool = true;
				if (this.mobile && this.password) {
					bool = false;
				}
				return bool;
			}
		},
		data() {
			return {
				mobile: '13243909001',
				password: 'q12345',
				popupShow: false,

				// 下面是微信获取个人信息的相关变量
				userInfo: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
				// 上面是微信获取个人信息的相关变量
			};
		},
		onLoad(options) {
			setTimeout(() => {
				this.logout();
			}, 100);

			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true;
			}
		},
		methods: {
			getUserProfile(e) {
				wx.checkSession({
					success() {
						//session_key 未过期，并且在本生命周期一直有效
						uni.showToast({
							title: '登录成功'
						})
					},
					fail() {
						// session_key 已经失效，需要重新执行登录流程
						let code = '';
						wx.login({ //重新登录
							success: (res) => {
								code = res.code;
								console.debug(code);
								console.debug(res);
							}
						});

						// 必须是在用户已经授权的情况下调用
						wx.getUserInfo({
							success: function(res) {
								var userInfo = res.userInfo
								var nickName = userInfo.nickName
								var avatarUrl = userInfo.avatarUrl
								var gender = userInfo.gender //性别 0：未知、1：男、2：女
								var province = userInfo.province
								var city = userInfo.city
								var country = userInfo.country
								console.debug(userInfo);
								console.debug(nickName);
								console.debug(avatarUrl);
								console.debug(gender);
								console.debug(province);
								console.debug(city);
								console.debug(country);
							}
						});

					}
				});

				if (this.canIUseGetUserProfile) {
					// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
					// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
					wx.getUserProfile({
						desc: '用于完善资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (res) => {
							this.userInfo = res.userInfo;
							this.hasUserInfo = true;
							console.debug(this.userInfo.avatarUrl);
							console.debug(this.userInfo.nickName);
							console.debug(this.userInfo.city);
							console.debug(this.userInfo.country);
							console.debug(this.userInfo.gender);
							console.debug(this.userInfo.language);
							console.debug(this.userInfo.province);
							console.debug(this.userInfo);
						}
					});
				}
			},
			mpWxGetUserInfo() {
				console.debug("微信登录！");
				uni.showToast({
					title: '微信登录',
					icon: 'loading'
				});

				try {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							console.log(loginRes.authResult);
							uni.reLaunch({
								url: '../index/index?wxlogin=true'
							});
						},

					});
				} catch (e) {
					uni.showToast({
						title: '登录失败',
						icon: 'none'
					});
				}

				// setTimeout(()=>{ },2000);
			},
			login() {
				console.debug("登录，账号：" + this.mobile + "，密码：" + this.password);
				uni.showToast({
					title: '正在登录',
					icon: 'loading'
				});
				uni.request({
					url: this.httpRoot + 'login',
					method: 'POST',
					data: {
						username: this.mobile,
						password: this.password
					},
					success: res => {
						setTimeout(() => {
							var data = res.data;
							console.debug(data);
							if (data.code == 200 && data.data.token) {
								uni.setStorageSync('TOKEN', data.data.token);
							}
							uni.showToast({
								title: data.message,
								icon: 'none'
							});
							if(this.checkLogin(null,null,false)){
								uni.reLaunch({
									url:'../index/index?message=登录成功'
								});
							}
						}, 2000);
					},
					fail: () => {
						uni.showModal({
							content: '连接服务器失败'
						});
					},
					complete: () => {

					}
				});
			},
			logout() {
				try {
				    uni.clearStorageSync();
				} catch (e) {
				    // error
				}
			},
			back() {
				uni.navigateTo({
					url: '../index/index'
				});
			},
			register() {
				uni.navigateTo({
					url: '../user_register/user_register'
				});
			},
			resetPassword() {
				uni.navigateTo({
					url: '../user_find_password/user_find_password'
				});
			},
			inputMobile: function(e) {
				this.mobile = e.detail.value;
			},
			inputPwd: function(e) {
				this.password = e.detail.value;
			},
			clearInput(type) {
				if (type == 1) {
					this.mobile = '';
				} else {
					this.password = '';
				}
			}
		}
	};
</script>

<style lang="scss">
	.container {
		.tui-status-bar {
			width: 100%;
			height: var(--status-bar-height);
		}

		.tui-header {
			width: 100%;
			padding: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
		}

		.tui-page-title {
			width: 100%;
			font-size: 48rpx;
			font-weight: bold;
			color: $uni-text-color;
			line-height: 42rpx;
			padding: 40rpx;
			box-sizing: border-box;
		}

		.tui-form {
			padding-top: 50rpx;

			.tui-view-input {
				width: 100%;
				box-sizing: border-box;
				padding: 0 40rpx;

				.tui-cell-input {
					width: 100%;
					display: flex;
					align-items: center;
					padding-top: 48rpx;
					padding-bottom: $uni-spacing-col-base;

					input {
						flex: 1;
						padding-left: $uni-spacing-row-base;
					}

					.tui-icon-close {
						margin-left: auto;
					}
				}
			}

			.tui-cell-text {
				width: 100%;
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				box-sizing: border-box;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tui-color-primary {
					color: $uni-color-primary;
				}
			}

			.tui-btn-box {
				width: 100%;
				padding: 0 $uni-spacing-row-lg;
				box-sizing: border-box;
				margin-top: 80rpx;
			}
		}

		.tui-login-way {
			width: 100%;
			font-size: 26rpx;
			color: $uni-color-primary;
			display: flex;
			justify-content: center;
			position: fixed;
			left: 0;
			bottom: 80rpx;

			view {
				padding: 12rpx 0;
			}
		}

		.l-body-fixed {
			z-index: 997;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 158rpx;
			display: flex;
			width: 100%;
			padding: 0 var(--pad-lr);
			align-items: center;
			white-space: nowrap;
			background-color: #FFFFFF;
			justify-content: space-between;
		}

	}
</style>
